window.onload = () => {
        // 获取本地用户名
        let uid = localStorage.getItem('uid');
        // !判断用户名
        if (localStorage.getItem('username')) {
            $('#username').html(`<a href="javascript:;">${localStorage.getItem(`username`)}</a>`)
    };
    // !侧边栏高度为 视窗窗口的高度
    $('.aside').height(document.documentElement.scrollHeight);
    // !二维码划过事件
    QR_code()

    function QR_code() {
        $('.aside-bom li:eq(0)').hover(() => {
            $('.aside-bom li:eq(0) a:eq(0)').css('display', 'block')
        }, () => {
            $('.aside-bom li:eq(0) a:eq(0)').css('display', 'none')
        })
    }



    // !查询用户购物车中的商品 接口
    carList()
    function carList() {
        let id = uid;
        let params = { id };
        let num = 0;
        // 发起请求
        axios.get(cartListAPI, { params })
            .then(({ data }) => {
                data.data.forEach(v => {
                    num += parseInt(v.pnum)
                });
                console.log(num);
                $('.car-num').text(num);
                $('.aside-car').text(num)
            })
    }
    // ! 放大镜
    Zoom()
    function Zoom() {
        //? 划入
        $('.magnifying-img').on('mouseenter', () => {
            $('.mark').css('display', 'block')
            $('.magnifying-bigimg').css('display', 'block')
            // ? 移动
            function fn(e) {
                let x = e.pageX - $('.magnifying-img').offset().left
                let y = e.pageY - $('.magnifying-img').offset().top
                $('.mark').css('left', x - $('.mark').width() / 2)
                $('.mark').css('top', y - $('.mark').height() / 2)
                // ?判断黄色边界
                //! position 相对于父元素的偏移量
                if ($('.mark').position().left <= 0) {
                    $('.mark').css('left', 0)
                }
                if ($('.mark').position().top <= 0) {
                    $('.mark').css('top', 0)
                }
                if ($('.mark').position().left >= $('.magnifying-img').width() - $('.mark').width()) {
                    $('.mark').css('left', $('.magnifying-img').width() - $('.mark').width())
                }
                if ($('.mark').position().top >= $('.magnifying-img').height() - $('.mark').height()) {
                    $('.mark').css('top', $('.magnifying-img').height() - $('.mark').height())
                }
                $('.magnifying-bigimg img').css('left', -$('.mark').position().left * $('.magnifying-bigimg').width() / $('.mark').width())
                $('.magnifying-bigimg img').css('top', -$('.mark').position().top * $('.magnifying-bigimg').height() / $('.mark').height())
            }

            $('.magnifying-img').on('mousemove', fn)
        })
        // ?划出
        $('.magnifying-img').on('mouseleave', () => {
            $('.magnifying-img').off('mousemove')
            $('.mark').css('display', 'none')
            $('.magnifying-bigimg').css('display', 'none')
        })
    }
    // !导入商品详情
    Detail()
    function Detail() {
        let obj = JSON.parse(localStorage.getItem('pdetail'));
        // ? 商品id
        $('#pid span').text(obj.pid);
        // ? 商品名称 和详情
        $('.content-message .ppname').html(obj.pname);
        $('.content-message .pdesc').html(obj.pdesc);
        // ? 价格
        $('#pprice').text(obj.pprice);
        // ? 原价
        $('#cost').text((parseFloat(obj.pprice) + 30).toFixed(2));
        // ? 分期
        $('.loans-price').eq(0).text((obj.pprice / 3).toFixed(2));
        $('.loans-price').eq(1).text((obj.pprice / 6).toFixed(2));
        $('.loans-price').eq(2).text((obj.pprice / 12).toFixed(2));
        $('.loans-price').eq(3).text((obj.pprice / 24).toFixed(2));
        // ? 图片
        let reg = /^[http]/
        if (reg.test(obj.pimg)) {
            $('.magnifying-img img').prop('src', obj.pimg);
            $('.magnifying-bigimg img').prop('src', obj.pimg);
            $('.ul_box ul li:eq(0) img').prop('src', obj.pimg);
            // * back 系列
            // *图片
            $('.back-img img').prop('src', obj.pimg)
            // * 名字
            $('.back-pname').text(obj.pname)
        }
        // !数量计算
        pName()
        function pName() {
            // let outTime
            // !输入框
            $('#product-num').on('input', () => {
                // if ($('#product-num').val() >= 99) {
                //     $('#product-num').val('99')
                // }
                // clearTimeout(outTIme)
                outTIme = setTimeout(() => {
                    if ($('#product-num').val() == '' || $('#product-num').val() <= 1) {
                        $('#product-num').val('1')
                        $('#lose').css('color', '#ccc')
                        // 禁止点击减号
                        $('#lose').css('cursor', 'not-allowed')
                    }
                }, 1000)
            })
            // !加号
            $('#plus').on('click', () => {
                $('#product-num').get()[0].value = parseInt($('#product-num').get()[0].value) + 1
                if ($('#product-num').val() > 1) {
                    $('#lose').css('cursor', 'pointer')
                    $('#lose').css('color', '#666')
                }
            })
            // !减号
            $('#lose').on('click', () => {
                if ($('#product-num').val() == 2) {
                    $('#lose').css('color', '#ccc')
                    $('#lose').css('cursor', 'not-allowed')
                    $('#product-num').get()[0].value = parseInt($('#product-num').get()[0].value) - 1
                } else if ($('#product-num').val() > 1) {
                    $('#lose').css('cursor', 'pointer')
                    $('#lose').css('color', '#666')
                    $('#product-num').get()[0].value = parseInt($('#product-num').get()[0].value) - 1
                }
            })
        }
        // ! 添加购物车
        addShoppingCar()
        function addShoppingCar() {
            $('#addcar').on('click', () => {
                let pnum = $('#product-num').val()
                if (pnum >= 1) {
                    let pid = $('#pid span').text()
                    let params = { pnum, uid, pid }
                    $('.back-pnum span').text($('#product-num').val())
                    axios.get(cartAddAPI, { params })
                        .then((res) => {
                            $('.content').css('display', 'none')
                            $('.back-w').css('display', 'block')
                            carList()
                        })
                } else {
                    alert('无效商品数量')
                }

            })
        }
        // !背面
        $('.buttons a:eq(0)').on('click', () => {
            $('.content').css('display', 'block')
            $('.back-w').css('display', 'none')
        })
        // ! 放大镜 下
        fdImg()
        function fdImg() {
            $('.img-list a:eq(1)').on('click', () => {
                if ($('.ul_box ul').css('left') == '0px') {
                    console.log(1);
                    $('.ul_box ul').animate({ left: '-260' }, 500, 'swing')
                }
            })
            $('.img-list a:eq(0)').on('click', () => {
                if ($('.ul_box ul').css('left') == '-260px') {
                    $('.ul_box ul').animate({ left: '0' }, 500, 'swing')
                }
            })
            $('.ul_box ul li').on('mouseenter', function () {
                let str = $(this).children().prop('src')
                $('.magnifying-bigimg img').prop('src', str)
                $('.magnifying-img img').prop('src', str)
                $(this).parent().children().css('border', '2px solid transparent')
                $(this).css('border', '2px solid #df3033')
            })
        }
    }
}